<template>
    <div class="categoryWrap">
      <h3>分类</h3>
      <el-button type="primary" @click = 'addCategory()'>添加</el-button>
      <!-- <el-button type="primary" @click = 'closeTag()'>关闭</el-button> -->
      <el-select class='categorySelect' v-model="selectType" @change="allCategory" filterable clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span style = 'font-size: 12px; color: #999;'>
          只显示前5个，其他的可通过下拉框获取
        </span>
      <div class="box_card" :class= "{'active': item.value == active}" v-for="item in selecteArr" :key="item.value" @click="doSelect(item)" >
        <el-card shadow="always" >
          {{ item.label }}
        </el-card>
      </div>
      
      <el-dialog title="添加" :visible.sync="addCategoryShow">
        <el-form ref="addCategoryData" :model="addCategoryData" label-width="120px" :inline = true>
          <el-form-item label="名称:">
              <el-input type="input" v-model ='addCategoryData.name' style="width: 196px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addCategoryShow = false">取 消</el-button>
            <el-button type="primary" @click="addCategorySubmit('addCategoryData')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
export default {
  props: {
    options: {
      type: Array,
      default() {
        return []
      }
    },
    currentSelectedType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      addCategoryShow: false,
      addCategoryData: {},
      selectType: '',
      selecteArr: [],
      selectedOne: [],
      active: 0
    }
  },
  mounted() {
    this.active = this.currentSelectedType
  },
  watch: {
    options: function() {
      this.doSelect(this.options[0])
      this.selecteArr = this.options.slice(0, 5)
      // this.selecteArr = this.options
      this.active = this.options[0].value
    }
  },
  methods: {
    addCategory() {
      this.addCategoryShow = true
    },
    addCategorySubmit() {
      this.$emit('addCategorySubmit', this.addCategoryData)
    },
    allCategory() {
      if (!this.selectType) {
        this.selecteArr = this.options.slice(0, 5)
      } else {
        this.selecteArr = this.options.filter((item) => {
          if (this.selectType === item.value) {
            return item
          }
        }).slice(0, 5)
      }
    },
    doSelect(item) {
      this.active = item.value
      this.$emit('selectedType', item)
    },
    closeTag() {
      this.$root.closeTag()
    }
  }
}
</script>
<style lang="scss">
.categoryWrap{
  width: 200px;
  margin: 0 20px;
  .categorySelect{
    margin: 10px 0; 
  }
  .box_card{
    width: 200px;
    margin: 5px 0;
    cursor: pointer;
  }
  .box_card.active .el-card{
    background: #409EFF;
    color: #fff;
  }
}
</style>

